<template>
  <view>

    <view class="sign_conent_box">
      <view class="sign_conent">
        <view class="sign_conent_title">
          你已连续签到
          <span class="sign_conent_title_span">{{sign_days}}</span>
          天
        </view>
        <view class="sign_list_aligns">
          <scroll-view class="scroll-view_H">
            <view class="scroll_view_items" v-for="(item, index) in sign_list" :key="index">
              <!--  -->
              <view class="scroll_view_itemsv">
                <view class="scroll_view_item">
                  <view class="scroll_view_item_img_box">
                    <image src="/pages_sub/static/sign_bg.jpg" class="scroll_view_item_img" mode="" >
                    </image>
                    <view class="scroll_view_item_top">{{ item.discount }}</view>
                    <view class="scroll_view_item_bottom">一张</view>
                  </view>
                  <view class="scroll_view_item_tips" v-bind:class="{ 'box': index+1 == sign_days }">{{ item.day }}天</view>
                </view>
                <view class="scroll_xian" v-show="index !== sign_list.length - 1"></view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="sign_conent_btn" @click="cksigin">{{todaySign ? '已签到':'今日未签到'  }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    todaySign: {
      type: Boolean,

    },
    sign_days:{
      type:Number

    }
  },
  data() {
    return {
      sign_list: [{
        discount: '+60',
        day: '1'
      },
        {
          discount: '+60',
          day: '2'
        },
        {
          discount: '+60',
          day: '3'
        },
        {
          discount: '+60',
          day: '4'
        },
        {
          discount: '+60',
          day: '5'
        },
        {
          discount: '+60',
          day: '6'
        },
        {
          discount: '+60',
          day: '7'
        }
      ],
    };
  },
  computed: {
  },
  onLoad() {
  },
  methods: {
    cksigin() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="scss">
.sign_conent_box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50upx;

  .sign_conent {
    width: 686upx;
    background: white;
    border-radius: 20upx;
    padding: 40upx 32upx;
    box-sizing: border-box;

    .sign_conent_title {
      width: 100%;
      font-size: 36upx;
      font-weight: bold;
      color: #333333;

      .sign_conent_title_span {
        color: #ff6526 !important;
      }
    }

    .sign_list_aligns {
      width: 100%;
      padding: 48upx 0 64upx 0;
      box-sizing: border-box;

      .scroll-view_H {
        width: 750rpx;
        display: flex;
        white-space: nowrap;

        .scroll_view_items {
          display: inline-block;
        }

        .scroll_view_itemsv {
          display: flex;
        }

        .scroll_view_item {
          .scroll_view_item_img_box {
            width: 80upx;
            height: 80upx;
            position: relative;

            .scroll_view_item_top {
              font-size: 20upx;
              color: #bf8d46;
              font-weight: bold;
              position: absolute;
              top: 25upx;
              width: 100%;
              text-align: center;
              z-index: 1;
            }

            .scroll_view_item_bottom {
              font-size: 12upx;
              color: #ffe29d;
              position: absolute;
              bottom: 18upx;
              left: 42upx;
              z-index: 2;
            }
          }

          .scroll_view_item_tips {
            width: 80upx;
            text-align: center;
            font-size: 26upx;
            padding-top: 16upx;
            // color: #333333;
          }

          .scroll_view_item_img {
            width: 80upx;
            height: 80upx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
          }
        }

        .scroll_xian {
          width: 10rpx;
          height: 2upx;
          background: #ffe4d9;
          margin-top: 52upx;
        }
      }
    }

    .sign_conent_btn {
      width: 100%;
      border-radius: 45upx;
      background: linear-gradient(270deg, #fcae3a 0%, #f15d25 100%);
      color: #ffffff;
      text-align: center;
      padding: 22upx 0;
      font-size: 32upx;
    }
  }
}
.box{
  color: #f15d25;
}
</style>
